<template>
  <div>
    <div class="status">
      <div class="divBorder">
        <div>
          <el-row
            :gutter="20"
          >
            <el-col :span="6">
              <div class="panel">
                <panel-title title="累计舆论数"></panel-title>
                <div class="panel-body">
                  <h1 class="number" @click="jumpToTopicList">{{totalTopic}}</h1>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="panel">
                <panel-title title="累计文章数">
                </panel-title>
                <div class="panel-body">
                  <h1 class="number" @click="jumpToArticleList">{{totalArticle}}</h1>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="panel">
                <panel-title title="累计用户数">
                </panel-title>
                <div class="panel-body">
                  <h1 class="number" @click="jumpToReviewerList">{{totalReviewer}}</h1>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="panel">
                <panel-title title="累计评论数">
                </panel-title>
                <div class="panel-body">
                  <h1 class="number alertColor" @click="jumpToCommentList">{{totalComment}}</h1>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!--字符云图-->
        <div class="panel">
          <panel-title title="热门话题字符云"></panel-title>
          <div class="panel-body" style="height: 440px">
            <word-cloud-chart v-if="wordCloudData != null" :wordCloudData="wordCloudData"></word-cloud-chart>
          </div>
        </div>
        <el-row
          :gutter="20"
        >
          <el-col :span="12">
            <!--性别分布图-->
            <div class="panel">
              <panel-title title="性别比例饼图"></panel-title>
              <div class="panel-body" style="height: 440px">
                <sex-pie-chart v-if="sexPieData != null" :sexPieData="sexPieData"></sex-pie-chart>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <!--受众地图分布-->
            <div class="panel">
              <panel-title title="受众分布地图"></panel-title>
              <div class="panel-body" style="height: 440px">
                <address-chart
                  v-if="addressData != null"
                  :addressData="addressData"
                ></address-chart>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="topTen">
          <h2>Top 10</h2>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="昨天" name="topTenPeriod1"></el-tab-pane>
            <el-tab-pane label="7天" name="topTenPeriod7"></el-tab-pane>
            <el-tab-pane label="14天" name="topTenPeriod14"></el-tab-pane>
            <el-tab-pane label="30天" name="topTenPeriod30"></el-tab-pane>
          </el-tabs>
          <el-row :gutter="20">
            <el-col :span="13">
              <div class="panel">
                <div class="panel-body">
                  <el-table
                    :data="topTenTopic"
                    style="width: 100%">
                    <el-table-column
                      prop="hotWord"
                      label="话题"
                      width="250">
                      <template slot-scope="scope">
                        <span @click="jumpToDetail(scope.row.id)" style="cursor: pointer">{{scope.row.hotWord}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="hotIndex"
                      label="热度"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="type"
                      label="类型">
                      <template slot-scope="scope">
                        <el-tag type="success">{{scope.row.type}}</el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="panel">
                <div class="panel-body">
                  <el-table
                    :data="topTenReviewer"
                    style="width: 100%">
                    <el-table-column
                      prop="nickname"
                      label="昵称"
                      width="230">
                      <template slot-scope="scope">
                        <span @click="jumpToReviewerDetail(scope.row.reviewerId)" style="cursor: pointer">{{scope.row.nickname}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="commentCount"
                      label="评论数">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {panelTitle} from 'components'
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";
  import {userUtil} from 'common/tools'
  import moment from 'moment'
  import wordCloudChart from '../../components/chart/wordCloudChart'
  import sexPieChart from '../../components/chart/sexPieChart'
  import addressChart from '../../components/chart/addressChart'

  require('echarts-wordcloud');


  export default {
    data() {
      return {
        options: [],
        tableData: [],
        loading: true,
        totalReviewer: 0,
        totalComment: 0,
        totalArticle: 0,
        totalTopic: 0,
        sellerDay: 7,
        productDay: 7,
        searchUpdateDate: [],
        downDay: 7,
        topTenDay: 1,
        topData: {
          seller: [],
          cate: [],
          product: []
        },
        defData: [],
        wordCloudData: null,
        sexPieData: null,
        addressData: null,
        activeName: null,
        topTenTopic: [],
        topTenReviewer: null,
      }
    },
    components: {
      ElFormItem,
      panelTitle,
      wordCloudChart,
      sexPieChart,
      addressChart
    },
    created() {
      this.getTotalTopic()
      this.getTotalArticle()
      this.getTotalReviewer()
      this.getTotalComment()
      this.getCloudData()
      this.getReviewerSex()
      this.getReviewerAddress()
      this.getTopTenTopic()
      this.getTopTenReviewer()
    },
    methods: {
      handleChange() {
        this.getTopTen()
      },
      getTotalTopic() {
        this.$fetch.apiTopic.getTotalTopic({}).then(({data: data}) => {
          this.totalTopic = data;
        })
      },
      getTotalArticle() {
        this.$fetch.apiArticle.getTotalArticle({}).then(({data: data}) => {
          this.totalArticle = data
        })
      },
      getTotalReviewer() {
        this.$fetch.apiReviewer.getTotalReviewer({}).then(({data: data}) => {
          this.totalReviewer = data
        })
      },
      getTotalComment() {
        this.$fetch.apiComment.getTotalComment({}).then(({data: data}) => {
          this.totalComment = data
        })
      },
      getTopTen() {
      },

      //切换
      handleClick(tab, event) {
        if ("topTenPeriod1" == tab.name) {
          this.topTenDay = 1
        } else if ("topTenPeriod7" == tab.name) {
          this.topTenDay = 7
        } else if ("topTenPeriod14" == tab.name) {
          this.topTenDay = 14
        } else if ("topTenPeriod30" == tab.name) {
          this.topTenDay = 30
        }
        this.getTopTen()
      },
      jumpToTopicList() {
        //this.$router.push({name: 'consensus', params: {searchCity: [this.searchCity[0], this.searchCity[1]]}})
        this.$router.push({name: 'consensus', params: null})
      },
      jumpToArticleList() {
        this.$router.push({name: 'article', params: null})
      },
      jumpToReviewerList() {
        this.$router.push({name: 'reviewer', params: null})
      },
      jumpToCommentList() {
        this.$router.push({name: 'comment', params: null})
      },
      getTimeStamp(period) {
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - period);
        var endDate = new Date();
        this.searchUpdateDate = [moment(startDate).format("YYYY-MM-DD HH:mm:ss"), moment(endDate).format("YYYY-MM-DD HH:mm:ss")]
      },
      getCloudData() {
        //获取新开商家数
        this.$fetch.apiTopic.getCloudData({}).then(
          ({data: data}) => {
            data.forEach(element => {
              if(typeof(element.value) === 'string') {
                element.value = parseInt(element.value.slice(0, element.value.length - 1)) * 10000
              }
            });
            this.wordCloudData = data
          })
      },
      getReviewerSex() {
        //获取新开商家数
        this.$fetch.apiReviewer.getReviewerSex({}).then(
          ({data: data}) => {
            this.sexPieData = data
          })
      },
      getReviewerAddress() {
        //获取新开商家数
        this.$fetch.apiReviewer.getReviewerAddress({}).then(
          ({data: data}) => {
            this.addressData = data
          })
      },
      getTopTenTopic() {
        //获取新开商家数
        this.$fetch.apiTopic.getTopTenTopic({}).then(
          ({data: data}) => {
            this.topTenTopic = data
          })
      },
      getTopTenReviewer() {
        //获取新开商家数
        this.$fetch.apiReviewer.getTopTenReviewer({}).then(
          ({data: data}) => {
            this.topTenReviewer = data
          })
      },
      jumpToDetail(id) {
        this.$router.push({
          name: 'consensusDetail',
          params: {id: id}
        })
      },
      jumpToReviewerDetail(reviewerId) {
        this.$router.push({
          name: 'reviewerDetail',
          params: {reviewerId: reviewerId}
        })
      },
    }
  }
</script>

<style>
  .divBorder {
    border: 1px solid grey;
    border-radius: 10px;
    padding: 10px;
  }

  h2 {
    color: #65cea7;
  }

  h1.number {
    font-weight: 100;
    text-align: center;
    color: #65cea7;
    margin-top: 0;
  }

  h1.alertColor {
    color: red;
  }

  .panel-body h1 {
    cursor: pointer;
  }
</style>
